<!-- INCLUDE page_header.html -->

<!-- IF $_IS_DESKTOP AND BREADCRUMBS -->
<div class="breadcrumbs"><p>{BREADCRUMBS}</p></div>
<!-- ENDIF -->

    <!-- IF $_IS_MOBILE -->
	<div id="overview-profile" class="pane">
        <!-- IF USER_MOBILE_COVER_PHOTO -->
		<div class="info no-icon" style="height: 90px; background-image: url('{USER_MOBILE_COVER_PHOTO}');">
        <!-- ELSE -->
        <div class="info no-icon">
        <!-- ENDIF -->
        <h2>{GROUP_DISPLAY_NAME}</h2>
        </div>
    </div>
    <!-- ENDIF -->

<div id="content">
    <!-- IF NOT $_IS_MOBILE -->
	<div id="overview-profile" class="pane">
		<div class="img-wb img-fl">
			<!-- IF PRIMITIVE_THUMB -->
			<img src="{PRIMITIVE_THUMB}" data-at2x="{USER_MOBILE}" alt="{USER_DISPLAY_NAME} Display Picture" />
            <!-- ENDIF -->
		</div>
        <!-- IF USER_COVER_PHOTO -->
		<div class="info" style="height: 190px; background-image: url('{USER_COVER_PHOTO}');">
        <!-- ELSE -->
        <div class="info">
        <!-- ENDIF -->
            
            <ul id="profile-links">
            <!-- BEGIN link_list -->
                <li><a href="{link_list.U_LINK}">{link_list.S_FAVICON}
                <!-- IF link_list.TITLE -->
                <span>{link_list.TITLE}</span>
                <!-- ENDIF -->
                </a></li>
            <!-- END link_list -->
            </ul>
			<h2><a href="{U_GROUP}">{GROUP_DISPLAY_NAME}</a></h2>
		<div class="cheat-clear"></div>
	</div>
    </div>
<!-- BEGIN primitive_head_hook -->
{primitive_head_hook.BODY}
<!-- END primitive_head_hook -->
    <!-- ENDIF -->
    <!-- IF $_IS_MOBILE -->
    <p class="action-buttons">{BREADCRUMBS}<span class="actions-menu"><a onclick="return showPopupMenu(event, 'actions-menu');"><span></span></a></span></p>
    <ul id="actions-menu" class="popup-menu">
        <!-- IF U_JOIN -->
        <li><a href="{U_JOIN}">Join This Group</a></li>
        <!-- ENDIF -->
        <!-- IF U_LEAVE -->
        <li><a href="{U_LEAVE}">Leave This Group</a></li>
        <!-- ENDIF -->
        <!-- IF U_CANCEL -->
        <li><a href="{U_CANCEL}">Cancel Membership Request</a></li>
        <!-- ENDIF -->
        <!-- IF U_INVITE -->
        <li><a href="{U_INVITE}">Invite to This Group</a></li>
        <!-- ENDIF -->
        <!-- IF U_GROUP_ACCOUNT -->
        <li><a href="{U_GROUP_ACCOUNT}">Group Account Panel</a></li>
        <!-- ENDIF -->
    </ul>
    <!-- ENDIF -->
	<div id="pane-profile">
  		<div id="pane-pages" class="pane">
            <!-- IF $_IS_MOBILE -->
            <h3 onclick="ShowPages()">{L_PAGES}</h3>
            <!-- ELSE -->
			<h3>{L_PAGES}</h3>
            <!-- ENDIF -->
			<ul class="page-tiles">
				{PAGE_LIST}
			</ul>
		</div>
    <!-- IF NOT $_IS_MOBILE -->
		<div id="pane-profile-overview" class="pane">
			<h3><a href="{U_GROUP}">{GROUP_DISPLAY_NAME}</a></h3>
			<dl>
			<dt>Group Created:</dt>
			<dd>{DATE_CREATED}</dd>
			</dl>
			<!-- IF U_JOIN -->
			<p><span id="join-group" class="post-button"><a href="{U_JOIN}">Join This Group</a></span></p>
			<!-- ENDIF -->
			<!-- IF U_LEAVE -->
			<p><span id="leave-group" class="post-button"><a href="{U_LEAVE}">Leave This Group</a></span></p>
			<!-- ENDIF -->
			<!-- IF U_CANCEL -->
			<p><span id="cancel-group" class="post-button"><a href="{U_CANCEL}">Cancel Membership Request</a></span></p>
			<!-- ENDIF -->
			<!-- IF U_INVITE -->
			<p><span id="invite-group" class="post-button"><a href="{U_INVITE}">Invite to This Group</a></span></p>
			<!-- ENDIF -->
            <!-- IF U_GROUP_ACCOUNT -->
			<p><span id="account-group" class="post-button"><a href="{U_GROUP_ACCOUNT}">Group Account Panel</a></span></p>
			<!-- ENDIF -->
		</div>
        <!-- ENDIF -->
		<!-- IF OPERATORS -->
		<div class="pane">
			<h3>Group Operators ({OPERATORS})</h3>
			<!-- BEGIN operator_list -->
			<ul>
				<li>
					<a href="{operator_list.U_PROFILE}">{operator_list.USER_DISPLAY_NAME}</a>
					<!-- IF operator_list.U_RESIGN -->
					<span class="post-button"><a href="{operator_list.U_RESIGN}">Resign</a></span>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- END operator_list -->
		</div>
		<!-- ENDIF -->
		<!-- IF OFFICERS -->
		<div class="pane">
			<h3>Group Officers ({OFFICERS})</h3>
			<!-- BEGIN officer_list -->
			<ul>
				<li>
					<a href="{officer_list.U_PROFILE}">{officer_list.USER_DISPLAY_NAME}</a>
					<span class="officer-title"><em>{officer_list.OFFICER_TITLE}</em></span>
					<!-- IF IS_OPERATOR -->
					<span class="post-button"><a href="{officer_list.U_REMOVE}">Remove</a></span>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- END officer_list -->
		</div>
		<!-- ENDIF -->
	</div>
	<div id="profile">
	<div id="profile-group-info-pane" class="pane">
	<h3>Group Information</h3>
	<dl>
		<!-- IF CATEGORY -->
    <dt>{L_CATEGORY}:</dt>
		<dd>{CATEGORY}</dd>
    <!-- ENDIF -->
		<!-- IF DESCRIPTION -->
		<dt>{L_DESCRIPTION}:</dt>
		<dd>{DESCRIPTION}</dd>
		<!-- ENDIF -->
	</dl>
	</div>
	<div id="profile-friends-pane" class="pane">
	<h3>Group Memberships ({MEMBERS})</h3>
	<!-- IF MEMBERS -->
	<p><a href="{U_MEMBERLIST}">View All</a></p>
	<ul id="profile-friends">
	<!-- BEGIN member_list -->
		<li>
        <!-- IF $_IS_MOBILE -->
            <!-- IF member_list.ICON -->
			<img src="{member_list.ICON}" alt="{member_list.USER_DISPLAY_NAME}" />
			<!-- ELSE -->
			<img src="/images/no_picture_100.png" alt="{member_list.USER_DISPLAY_NAME}" />
			<!-- ENDIF -->
        <!-- ELSE -->
			<dl>
				<dt><span class="img-wb"><a href="{member_list.U_PROFILE}">
				<!-- IF member_list.TILE -->
				<img src="{member_list.TILE}" alt="{member_list.USER_DISPLAY_NAME}" />
				<!-- ELSE -->
				<img src="/images/no_picture_100.png" alt="{member_list.USER_DISPLAY_NAME}" />
				<!-- ENDIF -->
				</a></span></dt>
				<dd><a href="{member_list.U_PROFILE}">{member_list.USER_DISPLAY_NAME}</a></dd>
			</dl>
        <!-- ENDIF -->
		</li>
	<!-- END member_list -->
	</ul>
	<div class="cheat-clear-left"></div>
	<p>There {L_IS_ARE} <a href="{U_MEMBERLIST}">{MEMBERS} {L_MEMBERS}</a> in this group.</p>
	<!-- ELSE -->
	<p>There are no members in this group.</p>
	<!-- ENDIF -->
	</div>
	<!-- BEGIN app_panel -->
{app_panel.BODY}
	<!-- END app_panel -->
	</div>
    </div>
<!-- INCLUDE page_footer.html -->